<template>
  <div>
    <div id="searchBar" class="headSearch searchFixed">
      <div class="location" @click="getLocationFn">
        <i class="icon iconfont icon-location"></i
        ><span>{{nowAddress}}</span>
      </div>
      <div class="staticSearchBox">
        <input type="search" placeholder="请输入商户名称" v-model="keyword" @keypress="search2($event)"/><span class="iconBox"
          ><i class="icon iconfont icon-search"></i
        ></span>
      </div>
    </div>
    <div class="main">
      <div class="swipeWrap">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(item, index) in bannerList" :key="index">
            <img :src="item.url" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div>
        <div class="menu">
            <div class="menuItem" v-for="(item,index) in TypeList" :key="index" @click="shopList(item.id)">
              <img :src="item.ico" alt=""/><span>{{item.name}}</span>
            </div>
          <!--<div class="menuItem" v-for="(item,index) in TypeList" :key="index" @click="shopList(item.id)">
            <img src="/static/img/Img_canyin.png" alt="" v-if="index == 0"/>
            <img src="/static/img/Img_xiuxian.png" alt="" v-if="index == 1"/>
            <img src="/static/img/Img_zhusu.png" alt="" v-if="index == 2"/>
            <img src="/static/img/Img_qiche.png" alt="" v-if="index == 3"/><span>{{item.name}}</span>
          </div>-->
          <!-- <div class="menuItem" @click="shopList(2)">
            <img src="/static/img/Img_xiuxian.png" alt="" /><span
              >休闲娱乐</span
            >
          </div>
          <div class="menuItem" @click="shopList(3)">
            <img src="/static/img/Img_zhusu.png" alt="" /><span>酒店住宿</span>
          </div>
          <div class="menuItem" @click="shopList(4)">
            <img src="/static/img/Img_qiche.png" alt="" /><span>生活日用</span>
          </div> -->
        </div>
      </div>
      <div class="mainInner">
        <div class="section-heading">
          <span>附近商家</span>
        </div>
      </div>
      <div
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="20"
        class="list"
      >
        <div>
          <div v-if="datalist && datalist.length>0">
            <div class="itemBox" v-for="(item, index) in datalist" :key="index">
              <div class="leftBox" @click="jumpDetail(item)">
                <span><img :src="item.logo" lazy="loaded"/></span>
              </div>
              <div class="rightBox" @click="jumpDetail(item)">
                <h3>{{ item.name }}</h3>
                <div class="starWrap">
                  <div class="left">
                    <div token class="star">
                      <i token class="icon iconfont icon-star on"></i
                      ><i token class="icon iconfont icon-star on"></i
                      ><i token class="icon iconfont icon-star on"></i
                      ><i token class="icon iconfont icon-star on"></i
                      ><i token class="icon iconfont icon-star on"></i>
                    </div>
                    <label>{{ item.star }}</label
                    ><span>月售：{{ item.orderNum }}单</span>
                  </div>
                  <div class="right">
                    <span>{{ item.distancenew }}</span
                    ><i class="icon iconfont icon-location"></i>
                  </div>
                </div>
                <div class="tagBox">
                  <span>{{ item.traderType }}</span>
                </div>
                <div class="activityBox">
                  <span
                    ><label class="activityIcon red">折</label
                    ><i>VIP折扣{{ item.memberPrice && item.memberPrice.length>0?item.memberPrice[1].discount:1 }}折</i></span
                  ><span
                    ><label class="activityIcon blue">折</label
                    ><i>会员折扣{{ item.memberPrice && item.memberPrice.length>0?item.memberPrice[2].discount:1 }}折</i></span
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="aui-content no-data" v-else>
            <div class="aui-row"><img src="/static/img/nodata.png" alt="" class="nodata_img"></div>
            <div class="aui-row no-text">暂无数据</div>
          </div>
        </div>
        <!---->
      </div>
    </div>
    <div>
      <div class="fixed-footer">
        <div style="overflow: hidden;">
          <a
            href="/index"
            class="router-link-exact-active router-link-active active"
            ><i class="icon iconfont icon-home-fill"></i><span>首页</span></a
          ><a href="/all" class=""
            ><i class="icon iconfont icon-find"></i><span>全部</span></a
          >
          <!-- <a href="/history" class=""
            ><i class="icon iconfont icon-order"></i><span>历史</span></a
          > -->
          <a href="/my" class=""
            ><i class="icon iconfont icon-person"></i><span>我的</span></a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { BannerListUrl, TraderListUrl,getUrlKey,MapAddressUrl,TraderTypeListUrl } from "@/api/axiosFun";
import { ConfigJs } from "@/api/login";
import { Swipe, SwipeItem } from 'vant';
import Vue from 'vue'
import axios from 'axios';
import $ from 'jquery'
export default {
  name: "Index",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      bannerList: [],
      datalist: [],
      TypeList: [],
      page: 1,
      pageSize: 100,
      traderType: "",
      cityId: "",
      orderNum: false,
      Latitude: "",
      Longitude: "",
      fid: "",
      nowAddress:"",
      keyword:''
    };
  },
  created() {
    this.fid  = this.GetQueryValue1("fid");
    console.log(this.fid);
    this.getConfig();
  },
  mounted() {
    this.getLocationFn();
    this.init();
  },
  methods: {
    init() {
      //轮播
      BannerListUrl().then(res => {
        console.log(res);
        if (res.data.errCode == 0) {
          this.bannerList = res.data.data;
        }
      });
      //商家类别
      TraderTypeListUrl().then(res => {
        console.log(res);
        if (res.errCode == 0) {
          this.TypeList = res.data;
        }
      });
      //商家列表
      this.initData();
    },
    /**
   * [通过参数名获取url中的参数值]
   * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
   * @param  {[string]} queryName [参数名]
   * @return {[string]}           [参数值]
   */
    GetQueryValue1:function (queryName) {
        if(!queryName){
          return;
        }
        var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if ( r != null ){
          return decodeURI(r[2]);
        }else{
          return null;
        }
    },
    goLocation(){
      //this.$router.replace({ name: "city", params: { id: 1 } });
    },
    getLocationFn(){
      var _this = this;
        wx.ready(function () {
            wx.checkJsApi({
               jsApiList: [
                  'checkJsApi',
                  'getLocation'
               ],
               success: function (res) {
                 console.log(JSON.stringify(res));
                  if (res.checkResult.getLocation == false) {
                     alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                     return;
                  }
               }
            });
            wx.getLocation({
               type: 'wgs84',
               success: function (res) {
                  console.log(JSON.stringify(res));
                if(res.errMsg == "getLocation:ok"){  
                   _this.Latitude = res.latitude;
                  _this.Longitude = res.longitude;
                  _this.initData();
                  MapAddressUrl({
                    lat: res.latitude,
                    lng: res.longitude
                  }).then(ret => {
                    console.log(ret);
                    if (ret.errCode == 0) {
                      _this.nowAddress = ret.data;
                    }
                  }); 
                }  
               },
               cancel: function (res) {
                  console.log('用户拒绝授权获取地理位置');
               }
            });
            wx.error(function(res){
               console.log("接口调取失败")
            });

         });
         return false;
    },
    getConfig(){
      console.log(window.location.href);
      ConfigJs(window.location.href).then((res)=>{
          console.log(res);
        let data=res.data.data
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名
            jsApiList: [
              'checkJsApi',
              'getLocation'
            ] // 必填，需要使用的JS接口列表
        });
      })
    },
    initData(){
      var _this = this;
      _this.datalist = [];
      TraderListUrl({
        page: this.page,
        pageSize: this.pageSize,
        traderType: this.traderType,
        cityId: this.cityId,
        orderNum: this.orderNum,
        name: this.keyword,
        Latitude: this.Latitude,
        Longitude: this.Longitude
      }).then(res => {
        console.log(res);
        if (res.errCode == 0) {
          //_this.datalist = res.data;
          console.log(res.data);
          if(res.data && res.data.length>0){
            
            res.data.map((item)=>{
              Vue.set(item,"distancenew",0)
              if(Number(item.distance)>1000){
                console.log((Math.round(item.distance/100)/10).toFixed(1) + "km");
                item.distancenew =  (Math.round(item.distance/100)/10).toFixed(1) + "km";
              } else {
                console.log(item.distance+"m");
                item.distancenew = item.distance+"m"
              }
            });
          }
          _this.datalist = res.data;
        }
      });
    },
    search2(ev){
      //alert(ev.keyCode);
      if(ev.keyCode == 13) {  //键盘回车的编码是13
          this.initData();
      }
    },
    jumpDetail(item) {
      this.$router.replace({ name: "traderDetail", params: { id: item.id } });
    },
    shopList(oid){
      this.traderType = oid;
      //商家列表
      this.initData();
    }
  }
};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  padding: 1.5rem 0 1.42rem;
}

.mint-swipe,
.mint-swipe-items-wrap {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.mint-swipe,
.mint-swipe-items-wrap {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.mint-swipe-items-wrap > div {
  position: absolute;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  width: 100%;
  height: 100%;
  display: none;
}
.mint-swipe-items-wrap > div.is-active {
  display: block;
  -webkit-transform: none;
  transform: none;
}
.swipeWrap {
  width: 100%;
  height: 5rem;
  overflow: hidden;
}
.swipeWrap img {
  width: 100%;
  height: 5rem;
}
.mint-swipe-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.mint-swipe-indicator {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
  margin: 0 3px;
}
.mint-swipe-indicator.is-active {
  background: #fff;
}
.menu {
  width: 10.8rem;
  overflow: hidden;
}
.menu .menuItem {
  width: 2.7rem;
  text-align: center;
  margin: 0.4rem 0;
  float: left;
}
.menu .menuItem img {
  width: 1.2rem;
  height: 1.2rem;
}
.menu .menuItem span {
  display: block;
  font-size: 0.36rem;
  color: #232323;
}
.mainInner {
  padding: 0.27rem;
}
.section-heading {
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.4rem;
  text-align: center;
  position: relative;
}
.section-heading span {
  padding: 0 0.2rem;
  color: #000;
}
.itemBox {
  border-top: 1px solid #eee;
  padding: 0.2rem 0.27rem;
  width: 10.26rem;
  overflow: hidden;
}
.itemBox .leftBox {
  width: 1.9rem;
  float: left;
}
.itemBox .leftBox span {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 3px;
  border: 3px solid #ebebeb;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.itemBox .leftBox span img {
  width: 1.9rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.itemBox .rightBox {
  width: 8.09rem;
  padding-left: 0.27rem;
  float: left;
  color: #666;
  font-size: 0.42rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
}
.itemBox .rightBox h3 {
  font-size: 0.46rem;
  color: #333;
  font-weight: 700;
  padding: 0.1rem 0;
}
.itemBox .rightBox .starWrap {
  font-size: 0.29rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 0.15rem 0;
}
.itemBox .rightBox .starWrap .left {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
.star {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.star .icon {
  font-size: 0.29rem;
  display: inline-block;
  margin-left: 1px;
  color: #7e8c8d;
}
.star .icon.on {
  color: #ffb600;
}
.itemBox .rightBox .starWrap label,
.itemBox .rightBox .starWrap span {
  padding-left: 0.27rem;
}
.itemBox .rightBox .starWrap .right i {
  font-size: inherit;
  color: #999;
}
.itemBox .rightBox .starWrap .right {
  text-align: right;
}
.itemBox .rightBox .tagBox {
  width: 100%;
  padding-bottom: 0.1rem;
  border-bottom: 1px dotted #e1e1e1;
}
.itemBox .rightBox .tagBox span {
  display: inline-block;
  padding: 0.08rem 0.15rem;
  border: 1px solid #e1e1e1;
  border-radius: 1px;
  font-size: 0.26rem;
  margin: 0.05rem 0.15rem 0.05rem 0;
}
.itemBox .rightBox .activityBox {
  font-size: 0.29rem;
  padding: 0.1rem 0 0;
}
.itemBox .rightBox .activityBox span {
  display: inline-block;
  margin: 0.05rem 0.1rem 0.05rem 0;
}
.itemBox .rightBox .activityBox .activityIcon {
  display: inline-block;
  border-radius: 3px;
  height: 0.42rem;
  line-height: 0.46rem;
  font-size: 0.24rem;
  color: #fff;
  text-align: center;
  padding: 0.05rem 0.1rem;
}
.itemBox .rightBox .activityBox .activityIcon.red {
  background-color: #f07373;
}
.itemBox .rightBox .activityBox i {
  font-style: normal;
}
.itemBox .rightBox .activityBox span {
  display: inline-block;
  margin: 0.05rem 0.1rem 0.05rem 0;
}
.itemBox .rightBox .activityBox .activityIcon {
  display: inline-block;
  border-radius: 3px;
  height: 0.42rem;
  line-height: 0.46rem;
  font-size: 0.24rem;
  color: #fff;
  text-align: center;
  padding: 0.05rem 0.1rem;
}
.itemBox .rightBox .activityBox .activityIcon.blue {
  background-color: #0085ff;
}
.itemBox .rightBox .activityBox i {
  font-style: normal;
}
</style>
